<template>
	<view class="container">
		<view class="card">
			<view class="u-f-jsb">
				<view>账号名称</view>
				<text>{{item.userName}}</text>
			</view>
			<view class="u-f-jsb">
				<view>登录账号</view>
				<text>{{item.userCode}}</text>
			</view>
			<view class="u-f-jsb">
				<view>登录密码</view>
				<input password disabled v-model="item.userPwd"></text>
			</view>
			<view class="u-f-jsb">
				<view>账号状态<text style="font-size: 26rpx;color: #888;margin-left: 10rpx;">(启用/停用)</text></view>
				<switch color="RGBA(255, 206, 0, 1)" :checked="item.loginState==1" @change="switch1Change" />
			</view>
		</view>
		
		<view class="btns">
			<button type="default" :data-url="`../resetPassword/resetPassword?id=${item.id}`" @tap="$jumpPage">重置密码</button>
			<button type="default" @tap="removeAccount">删除账号</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:''
			};
		},
		onLoad(options) {
			console.log(options.item);
			this.item = JSON.parse(decodeURIComponent(options.item));
		},
		onUnload() {
			uni.$emit('editAccount');
		},
		methods: {
			switch1Change(e) {
				console.log(e.detail.value);
				let loginState = e.detail.value? 1:0;
				let { userName, userCode, id } = this.item;
				this.$u.api._editAccount({ userName, userCode, id, loginState });
			},
			// 删除账号
			removeAccount() {
				uni.showModal({
					title:'提示',
					content:'您确定要删除此账号吗！',
					success: (res) => {
						if(res.confirm) {
							this.$u.api._removeAccount({id:this.item.id}).then(res => {
								uni.showToast({
									title:'删除成功',
								})
								setTimeout(() => {
									uni.navigateBack();
								},888)
							})
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: RGBA(245, 245, 245, 1);
}
.container {
	padding: 20rpx;
	
	.card {
		border-radius: 16rpx;
		padding: 0 40rpx;
		font-size: 30rpx;
		background-color: #FFFFFF;
		>view {
			height: 76rpx;
			>text {
				margin-right: 10rpx;
			}
		}
	}
	
	.btns {
		width: 710rpx;
		position: fixed;
		bottom: 100rpx;
		
		>button {
			border-radius: 20rpx;
			margin-top: 20rpx;
			font-size: 32rpx;
			line-height: 90rpx;
		}
		
		>button:nth-child(1) {
			background-color: rgba(50, 62, 86, 1);
			color: #FFFFFF;
		}
		
		>button:nth-child(2) {
			border: 1rpx solid #C0C0C0;
		}
	}
}


</style>
